<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>栅格</title>
    <meta name="keywords" content="404" />
    <meta name="description" content="404" />
    <meta name="Author" content="larry" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="Shortcut Icon" href="${base}/favicon.ico" />
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="${base}/larryms/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/animate.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/uidemo.css" media="all">
</head>

<body class="larryms-layout-bgA box-blank gird-demo-box">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-fluid margin15">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-body">
                    <p class="library-tips" style="padding:15px 0px;">
                        自layui2.0版本起加入了强劲的栅格系统和后台布局方案，利用layui排版响应式网站和后台系统，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8，栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。具体使用可见layui文档，下面对layui内置栅格布局提供下示例。<cite style="color:#EE6337; ">【注意：下述演示中的颜色只是做一个区分作用，并非栅格内置】</cite>
                    </p>
                </div>
            </section>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>流体容器（宽度自适应，不固定）</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-sm3">
            <div class="grid-demo grid-demo-bg1">25%</div>
        </div>
        <div class="layui-col-sm3">
            <div class="grid-demo">25%</div>
        </div>
        <div class="layui-col-sm3">
            <div class="grid-demo grid-demo-bg1">25%</div>
        </div>
        <div class="layui-col-sm3">
            <div class="grid-demo">25%</div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>常规布局：从小屏幕堆叠到桌面水平排列</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">1/12</div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo">1/12</div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md9">
            <div class="grid-demo grid-demo-bg1">75%</div>
        </div>
        <div class="layui-col-md3">
            <div class="grid-demo">25%</div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1">33.33%</div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo">33.33%</div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1">33.33%</div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>列间隔</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="grid-demo grid-demo-bg1">1/4</div>
        </div>
        <div class="layui-col-md3">
            <div class="grid-demo">1/4</div>
        </div>
        <div class="layui-col-md3">
            <div class="grid-demo grid-demo-bg1">1/4</div>
        </div>
        <div class="layui-col-md3">
            <div class="grid-demo">1/4</div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>移动设备、平板、桌面端的复杂组合响应式展现</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo larryms-bg-lg">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo layui-bg-red">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            <div class="grid-demo layui-bg-blue">移动：4/12 | 平板：12/12 | 桌面：4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            <div class="grid-demo layui-bg-green">移动：4/12 | 平板：7/12 | 桌面：8/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            <div class="grid-demo layui-bg-black">移动：4/12 | 平板：5/12 | 桌面：4/12</div>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>始终等比例水平排列</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="grid-demo grid-demo-bg1">6/12</div>
        </div>
        <div class="layui-col-xs6">
            <div class="grid-demo">6/12</div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">3/12</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo">3/12</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">3/12</div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo">3/12</div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>栅格嵌套</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md5">
            <div class="layui-row grid-demo">
                <div class="layui-col-md3">
                    <div class="grid-demo larryms-bg-lg">内部列</div>
                </div>
                <div class="layui-col-md9">
                    <div class="grid-demo grid-demo-bg2">内部列</div>
                </div>
                <div class="layui-col-md12">
                    <div class="grid-demo grid-demo-bg3">内部列</div>
                </div>
            </div>
        </div>
        <div class="layui-col-md7">
            <div class="layui-row grid-demo grid-demo-bg1">
                <div class="layui-col-md12">
                    <div class="grid-demo larryms-bg-lg">内部列</div>
                </div>
                <div class="layui-col-md9">
                    <div class="grid-demo grid-demo-bg2">内部列</div>
                </div>
                <div class="layui-col-md3">
                    <div class="grid-demo grid-demo-bg3">内部列</div>
                </div>
            </div>
        </div>
    </div>
    <section class="layui-card">
        <div class="layui-card-body" style="padding: 25px 15px 15px 15px;">
            <p class="library-tips">让IE8/9兼容栅格：<br>事实上IE8和IE9并不支持媒体查询（Media Queries），但你可以使用下面的补丁完美兼容！放入你页面 <body> 标签内的任意位置</p>
            <pre class="larry-code">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
                <!--[if lt IE 9]>
                <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
                <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
                <![endif]-->
</pre>
            <blockquote class="layui-elem-quote" style="font-size: 14px;">更多关于栅格布局可参看layui文档介绍</blockquote>
        </div>
    </section>
</div>
<!-- 加载js文件-->
<script type="text/javascript" src="${base}/larryms/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        version: "2.0.8",
        base: '${base}/larryms/',
        page:'layuidemo'
    }).extend({
        larry: 'js/base'
    }).use('larry');
</script>
</body>

</html>
